import React from 'react';
import {PageContainer} from '@ant-design/pro-components';
import {ConfigProvider,  theme, Button, Card, Flex, Typography, Space, Col, Row} from 'antd';
import FloatButtonGroupAll from "@/components/FloatButtonGroupAll/FloatButtonGroupAll";


const cardStyle: React.CSSProperties = {
  width: 620,
};

const imgStyle: React.CSSProperties = {
  display: 'block',
  width: 353,
  height: 290,
  margin: '0 auto',
};

const style: React.CSSProperties = {background: '#0092ff', padding: '8px 20px', borderRadius: 8};


const NavFloatButton: React.FC = () => {
  const {Text, Link} = Typography;
  const SpaceTextGroup = () => (
    <>
      <Space direction="vertical">
        <Text>Ant Design (default)</Text>
        <Text type="secondary">Ant Design (secondary)</Text>
        <Text type="success">Ant Design (success)</Text>
        <Text type="warning">Ant Design (warning)</Text>
        <Text type="danger">Ant Design (danger)</Text>
        <Text disabled>Ant Design (disabled)</Text>
        <Text mark>Ant Design (mark)</Text>
        <Text code>Ant Design (code)</Text>
        <Text keyboard>Ant Design (keyboard)</Text>
        <Text underline>Ant Design (underline)</Text>
        <Text delete>Ant Design (delete)</Text>
        <Text strong>Ant Design (strong)</Text>
        <Text italic>Ant Design (italic)</Text>
        <Link href="https://ant.design" target="_blank">
          Ant Design (Link)
        </Link>
      </Space>
    </>
  );
  return (
    // 1. 单独使用暗色算法 // 2. 组合使用暗色算法与紧凑算法 algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    <ConfigProvider theme={{algorithm: theme.darkAlgorithm,}}>
      <PageContainer>
        <Card style={{borderRadius: 8,}}>
          <Space direction="vertical">
            <Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
              <Col className="gutter-row" span={24}>
                <Card style={{borderRadius: 8,}}>
                  <Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
                    {new Array(4).fill(null).map(function (item, index) {
                      return <Col key={index} className="gutter-row" span={6}>
                        <div style={style}>col-6</div>
                      </Col>;
                    })}
                  </Row>
                </Card>
              </Col>
            </Row>
            <Row gutter={{xs: 8, sm: 16, md: 24, lg: 32}}>
              {[...Array(6)].map(function (item, index) {
                return <Col key={index} className="gutter-row" span={4}>
                  <Card style={{borderRadius: 8,}}>
                    <SpaceTextGroup/>
                  </Card>
                </Col>;
              })}
            </Row>
            <Flex justify="space-between">
              {[...Array(7)].map(function (item, index) {
                return <Card key={index} style={{borderRadius: 8,}}>
                  <SpaceTextGroup/>
                </Card>;
              })}
            </Flex>
            <Flex justify="space-between">
              {[...Array(4)].map(function (item, index) {
                return <Card key={index} hoverable style={{borderRadius: 8,}}>
                  <SpaceTextGroup/>
                </Card>;
              })}
              <Card hoverable style={cardStyle} styles={{body: {padding: 0, overflow: 'hidden'}}}>
                <Flex justify="space-between" vertical={true}>
                  <img
                    alt="avatar"
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    style={imgStyle}
                  />
                  <Flex vertical align="flex-end" justify="space-between" style={{padding: 32}}>
                    <Typography.Title level={3}>
                      “antd is an enterprise-class UI design language and React UI library.”
                    </Typography.Title>
                    <Button type="primary" href="https://ant.design" target="_blank">
                      Get Started
                    </Button>
                  </Flex>
                </Flex>
              </Card>
            </Flex>
          </Space>
        </Card>
      </PageContainer>
      <FloatButtonGroupAll/>
    </ConfigProvider>
  );
};

export default NavFloatButton;
